<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三维展示效果，调整视口（叠加旋转矩阵+改变视口矩阵）</title>
</head>
<script type="module">
  import * as mat4 from '../assets/js/gl-matrix/esm/mat4.js';

  let webGL;
  let program;

  // 顶点着色器
  const vertexString = `
        attribute vec4 a_position;
        attribute vec4 a_color;
        varying vec4 color;
        uniform mat4 u_formMatrix;
        void main(){
            gl_Position = u_formMatrix * a_position;
            color = a_color;
        }`;

  // 片元着色器
  const fragmentString = `
        precision mediump float;
        varying vec4 color;
        void main(){
            gl_FragColor = color;
        }`;

  function init() {
    initWebGL();
    initShader();
    initBuffer();
  }


  function initWebGL() {
    let webGLdiv = document.getElementById('webgl');
    webGL = webGLdiv.getContext('webgl');
  }

  function initShader() {
    // 创建着色器对象（顶点、片元）
    let vsShader = webGL.createShader(webGL.VERTEX_SHADER);
    let fsShader = webGL.createShader(webGL.FRAGMENT_SHADER);

    // 绑定着色器源代码
    webGL.shaderSource(vsShader, vertexString);
    webGL.shaderSource(fsShader, fragmentString);

    // 编译着色器对象
    webGL.compileShader(vsShader);
    webGL.compileShader(fsShader);

    // 创建程序对象和shader对象进行绑定
    program = webGL.createProgram();
    webGL.attachShader(program, vsShader);
    webGL.attachShader(program, fsShader);

    // webGL和项目中间进行绑定和使用
    webGL.linkProgram(program);
    webGL.useProgram(program);
  }

  function initBuffer() {
    let triangleArray = [
      0.0, 0.5, -0.4, 1.0, 0.4, 1.0, 0.4, 1,
      -0.5, -0.5, -0.4, 1.0, 0.4, 1.0, 0.4, 1,
      0.5, -0.5, -0.4, 1.0, 0.4, 1.0, 0.4, 1,

      0.5, 0.4, -0.2, 1.0, 1.0, 0.4, 0.4, 1,
      -0.5, 0.4, -0.2, 1.0, 1.0, 0.4, 0.4, 1,
      0.0, -0.6, -0.2, 1.0, 1.0, 0.4, 0.4, 1,

      0.0, 0.4, 0.0, 1, 0.4, 0.4, 1.0, 1,
      -0.4, -0.4, 0.0, 1, 0.4, 0.4, 1.0, 1,
      0.4, -0.4, 0.0, 1, 0.4, 0.4, 1.0, 1
    ];
    let trianglePosition = new Float32Array(triangleArray);
    let aPosition = webGL.getAttribLocation(program, 'a_position');

    let triangleBuffer = webGL.createBuffer();
    webGL.bindBuffer(webGL.ARRAY_BUFFER, triangleBuffer);
    webGL.bufferData(webGL.ARRAY_BUFFER, trianglePosition, webGL.STATIC_DRAW);
    webGL.enableVertexAttribArray(aPosition);
    webGL.vertexAttribPointer(aPosition, 4, webGL.FLOAT, false, 8 * 4, 0);


    let aColor = webGL.getAttribLocation(program, 'a_color');
    webGL.enableVertexAttribArray(aColor);
    webGL.vertexAttribPointer(aColor, 4, webGL.FLOAT, false, 8 * 4, 4 * 4);

    let uniformMatrix = webGL.getUniformLocation(program, 'u_formMatrix');

    // 简单改变视口
    // let modelView = mat4.create();
    // mat4.identity(modelView);
    // modelView = mat4.lookAt(modelView, [0, 0, 0.3], [0, 0, 0], [0, 1, 0]);
    // webGL.uniformMatrix4fv(uniformMatrix, false, modelView);

    // 叠加旋转矩阵+改变视口矩阵
    let ModelMatrix = mat4.create();
    mat4.identity(ModelMatrix);
    // 这里标黄是因为参数类型，其实简单的话不用管，这里是为了标识为只读不可修改
    mat4.rotate(ModelMatrix, ModelMatrix, Math.PI / 2, [0, 0, 1]);

    let ViewMatrix = mat4.create();
    mat4.identity(ViewMatrix);
    ViewMatrix = mat4.lookAt(ViewMatrix, [0, 0, 0.3], [0, 0, 0], [0, 1, 0]);
    let mvMatrix = mat4.create();
    mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix);
    webGL.uniformMatrix4fv(uniformMatrix, false, mvMatrix);

    draw();
  }

  function draw() {
    webGL.clearColor(0, 0, 0, 1);
    webGL.clear(webGL.COLOR_BUFFER_BIT);
    webGL.drawArrays(webGL.TRIANGLES, 0, 9);
  }

  init();
</script>


<body>
<canvas id="webgl" width="1024" height="768"></canvas>
</body>

</html>